<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="gantt_here" style="width: 1000px; height: 400px"></div>
  </body>
  <link
    rel="stylesheet"
    href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css"
    type="text/css"
  />
  <script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

  <script>
    gantt.init("gantt_here");
    gantt.parse({
      data: [
        {
          id: 1,
          text: "Project #2",
          start_date: "01-04-2018",
          duration: 18,
          progress: 0.4,
          open: true,
        },
        {
          id: 2,
          text: "Task #1",
          start_date: "02-04-2018",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
        {
          id: 3,
          text: "Task #2",
          start_date: "11-04-2018",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
      ],
      links: [
        { id: 1, source: 1, target: 2, type: "1" },
        { id: 2, source: 2, target: 3, type: "0" },
      ],
    });
  </script>
</html>
